<template>
  <div class="album">
    <div class="my-bg"></div>
    <div class="album-slide">
      <div class="my-slide">
        <div class="hd-img">
          <img :src="singers.avator" alt="">
        </div>
        <ul class="info_1">
          <li>性别：{{attachSex(singers.sex)}}</li>
          <li>生日：{{singers.birthday}}</li>
          <li>地址：{{singers.location}}</li>
        </ul>
      </div>
      <div class="my-content">
        <div class="hd-intro">
            <h2>{{singers.name}} : </h2>
            <span>{{singers.introduction}}</span>
        </div>
        <div class="songs-body">
          <album-content :songList="listOfSongs">
            <template slot="title">歌单</template>
          </album-content>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import {mixin} from '../mixins'
import { mapGetters } from 'vuex'
import AlbumContent from '../components/AlbumContent'

export default {
  name: 'singer-album-page',
  data () {
    return {
      singers: {},
      textarea: ''
    }
  },
  computed: {
    ...mapGetters([
      'singersList', // 歌手列表
      'index', // 列表中的序号
      'listOfSongs' // 存放的音乐
    ])
  },
  components: {
    AlbumContent
  },
  mounted: function () {
    //
    this.singers = this.singersList[this.index]
    this.getSongList()
  },
  mixins: [mixin],
  methods: {
    getSongList () {
      let _this = this
      // 歌手的所有歌曲
      axios.get(_this.$store.state.HOST + '/singer/of/listSongs', {
        params: {
          id: _this.singers.id
        }
      })
        .then(function (response) {
          console.log("该歌手下的所有歌曲")
          console.log(response.data)
          _this.$store.commit('setListOfSongs', response.data)
/*
          重新给sessionStorage的listOfSongs赋值
           [{
            "id": 9,
            "singerId": 2,
            "name": "周杰伦-稻香",
            "introduction": "魔杰座",
            "createTime": "2018-12",
            "updateTime": "2018-12",
            "pic": "/img/songPic/daoxiang.jpg",
            "lyric": "[by:橘子大宝宝]\n[ti:稻香]\n[ar:周杰伦]\n[00:31.00]对这个世界如果你有太多的抱怨\n[00:34.05]跌倒了就不敢继续往前走\n[00:37.02]为什麽人要这麽的脆弱 堕落\n[00:41.55]请你打开电视看看\n[00:43.14]多少人为生命在努力勇敢的走下去\n[00:46.89]我们是不是该知足\n[00:49.43]珍惜一切 就算没有拥有\n[00:54.24]还记得你说家是唯一的城堡\n[00:57.49]随着稻香河流继续奔跑\n[01:00.42]微微笑 小时候的梦我知道\n[01:05.51]不要哭让萤火虫带着你逃跑\n[01:09.21]乡间的歌谣永远的依靠\n[01:12.12]回家吧 回到最初的美好\n[01:41.14]不要这麽容易就想放弃 就像我说的\n[01:44.59]追不到的梦想 换个梦不就得了\n[01:47.55]为自己的人生鲜艳上色 先把爱涂上喜欢的颜色\n[01:51.80]笑一个吧 功成名就不是目的\n[01:55.62]让自己快乐快乐这才叫做意义\n[01:58.51]童年的纸飞机 现在终於飞回我手里\n[02:04.41]所谓的那快乐 赤脚在田里追蜻蜓追到累了\n[02:08.62]偷摘水果被蜜蜂给叮到怕了 谁在偷笑呢\n[02:13.16]我靠着稻草人吹着风唱着歌睡着了\n[02:16.72]哦 哦 午后吉它在虫鸣中更清脆\n[02:19.58]哦 哦 阳光洒在路上就不怕心碎\n[02:22.53]珍惜一切 就算没有拥有\n[02:27.36]还记得你说家是唯一的城堡\n[02:31.24]随着稻香河流继续奔跑\n[02:34.18]微微笑 小时候的梦我知道\n[02:39.35]不要哭让萤火虫带着你逃跑\n[02:42.94]乡间的歌谣永远的依靠\n[02:45.91]回家吧 回到最初的美好\n[02:51.03]还记得你说家是唯一的城堡\n[02:54.55]随着稻香河流继续奔跑\n[02:57.62]微微笑 小时候的梦我知道\n[03:02.67]不要哭让萤火虫带着你逃跑\n[03:06.35]乡间的歌谣永远的依靠\n[03:09.23]回家吧 回到最初的美好",
            "url": "/song/周杰伦-稻香.mp3"
            }]
          }*/
          window.sessionStorage.setItem('listOfSongs', JSON.stringify(response.data))
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    attachSex (value) {
      console.log("性别")
      console.log(value)
      if (value === '0') {
        return '女'
      } else if (value === '1') {
        return '男'
      }
    }
  }
}
</script>

<style scoped>
  .my-bg {
    width: 100%;
    height: 200px;
    background-color: #93d2f8;
  }
  /*左*/
  .my-slide {
    float: left;
    width: 400px;
  }
  .hd-img {
    height: 300px;
    width: 300px;
    display: inline-block;
    position: relative;
    top:-100px;
    left: 50px;
    border-radius: 10%;
    overflow: hidden;
    border: 5px solid white;
  }
  .hd-img img {
    width: 100%;
  }
  .info_1 {
    color: black;
    font-size: 20px;
    font-weight: 500;
    padding-left: 100px;
  }
  .info_1 li {
    width: 100%;
    height: 40px;
  }

  /*右*/
  .my-content{
    margin-left: 300px;
    padding: 30px 100px;
  }
  .hd-intro {
    font-size: 20px;
  }
  .hd-intro > span {
    color: rgba(0, 0, 0, 0.5);
  }
  .songs-body {
    margin-top: 50px;
  }

</style>
